<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>Men category | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/user/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- for slider-range -->
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <link href="../layui/css/layui.css" rel="stylesheet">

</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div id="wrapper">

    <!-- BEGIN TOP BAR -->
    <div th:include="common/userShopHead :: head"></div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div th:include="common/userShopHead :: head-navigation"></div>
    <!-- END HEADER -->
    <!-- BEGIN TOP BAR -->

    <!-- END TOP BAR -->


    <!-- END HEADER -->

    <div class="title-wrapper">
        <div class="container">
            <div class="container-inner">
                <h1><span>MEN</span> CATEGORY</h1>
                <em>Over 4000 Items are available here</em>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="/touristShop/index">首页</a></li>
                <li><a href="">商品</a></li>
                <li class="active" v-text="cname">Men category</li>
            </ul>
            <!-- BEGIN SIDEBAR & CONTENT -->

            <div class="row margin-bottom-40 ">
                <!-- BEGIN SIDEBAR -->
                <div class="sidebar col-md-3 col-sm-5">
                    <tree :lists="lists"></tree>

                </div>


                <!-- END SIDEBAR -->
                <!-- BEGIN CONTENT -->
                <div class="col-md-9 col-sm-7">

                    <div class="row list-view-sorting clearfix">
                        <div class="col-md-2 col-sm-2 list-view">
                            <a href="#"><i class="fa fa-th-large"></i></a>
                            <a href="#"><i class="fa fa-th-list"></i></a>
                        </div>
                        <div class="col-md-10 col-sm-10">
                        </div>
                    </div>
                    <!-- BEGIN PRODUCT LIST -->
                    <div class="row product-list">
                        <input type="hidden"
                               class="btn btn-default fancybox-button"></input>
                        <!-- PRODUCT ITEM START -->
                        <div v-if="!shopVieList.length>0" style="    padding-left: 100px;">暂无商品</div>
                        <div class="col-md-4 col-sm-6 col-xs-12" v-for="item in shopVieList"
                             style="height: 446px;width: 292px;">
                            <div class="product-item">
                                <div class="pi-img-wrapper">
                                    <img :src="item.pageaddr+item.saveFileName" class="img-responsive"
                                         alt="Berry Lace Dress" style="height: 317px;width: 238px;">
                                    <div>
                                        <a :href="item.pageaddr+item.saveFileName"
                                           class="btn btn-default fancybox-button">查看</a>
                                        <a href="#product-pop-up"
                                           class="btn btn-default fancybox-fast-view1"
                                           @click="showView(item.id)"
                                        >详情</a>
                                    </div>
                                </div>
                                <h3><a href="item.html" v-text="item.name"></a></h3>
                                <div class="pi-price" v-text='"¥"+item.pirce'></div>
                                <a class="btn btn-default add2cart" @click="addCar($event,1)"
                                   :id="item.id">加入购物车</a>
                            </div>
                        </div>
                        <!-- PRODUCT ITEM END -->
                    </div>
                    <!-- END PRODUCT LIST -->
                    <!-- BEGIN PAGINATOR -->
                    <div class="row">
                        <div class="col-md-8 col-sm-8">
                            <ul id="pageLimit" style="float: right;"></ul>
                        </div>
                    </div>
                    <!-- END PAGINATOR -->
                </div>
            </div>
            <!-- END SIDEBAR & CONTENT -->
        </div>
    </div>

    <!-- BEGIN BRANDS -->
    <div th:include="common/Head :: brands"></div>
    <!-- END BRANDS -->

</div>
<!-- END fast view of a product -->

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../bootstrap/user/plugins/respond.min.js"></script>
<![endif]-->
<script src="../bootstrap/user/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/back-to-top.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script type="text/javascript" src="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="../bootstrap/user/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><!-- for slider-range -->
<script src="../bootstrap/user/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script type="text/javascript" src="../bootstrap/user/scripts/app.js"></script>
<!--
<script type="text/javascript" src="../bootstrap/user/scripts/test.js"></script>

-->
<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script src="../bootstrap/js/bootstrap-paginator.js"></script>
<script src="../layui/layui.js"></script>
<script type="text/javascript" src="../bootstrap/js/project/search.js"></script>
<script src="../bootstrap/js/project/user/shop/index/js/commodityMenu.js"></script>

<script type="text/javascript" th:inline="javascript">
    jQuery(document).ready(function () {

        console.log(jQuery(".fancybox-button").size())

        App.init();
        App.initBxSlider();
        App.initImageZoom();
        App.initSliderRange();
        App.initUniform();
        App.initTouchspin();

        var list = [[${list}]];
        vm.cname = [[${cname}]];
        vm.shopPage = [[${shop}]];
        console.log(vm.shopPage)
        if (list != null) {
            vm.shopVieList = list.list;
            vm.initPageLimit(vm.shopPage)
        }

    });

</script>


<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>